<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/10/2
  Time: 19:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>模板列表</title>
    <script src="../res/js/layui/layui.js"></script>
    <link href="../res/js/layui/css/layui.css" rel="stylesheet">
    <script crossorigin="anonymous" integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" src="https://lib.baomitu.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">

    <script src="../res/js/Tools.js"></script>
</head>
<body>

    <div class="demoTable">
        搜索：
        <div class="layui-inline">
            <input class="layui-input" name="modName" id="modName"
                   autocomplete="off">
        </div>
        <input type="button" id="seachTable"
               class="layui-btn layui-btn-normal" value="搜索" />
    </div>


    <table id="demo" lay-filter="test"></table>

    <script>
        var table2 = null;
        layui.use('table', function() {
            var table = layui.table;

            //第一个实例
            table2 = table.render({
                elem : '#demo',
                height : 550,
                toolbar : '#toolbarDemo',
                url : '../ModuleController/findAll.action' //数据接口
                ,
                page : true //开启分页
                ,
                cols : [ [ //表头
                    {
                        type : 'checkbox',
                        fixed : 'left'
                    }, {
                        field : 'modName',
                        title : '模块名称',
                        width : 150
                    }, {
                        field : 'modSite',
                        title : '模块地址',
                        width : 200
                    }, {
                        field : 'modSor',
                        title : '模块排序',
                        width : 100
                    }, {
                        field : 'modComment',
                        title : '备注',
                        width : 200
                    }, {
                        field : 'superModName',
                        title : '上级模块',
                        width : 200
                    },{
                        field : 'modState',
                        title : '是否可用',
                        width : 110,
                        templet : '#checkboxTpl',
                        unresize: true
                    }, {
                        field : 'action',
                        title : '操作',
                        width : 120,
                        toolbar : "#barDemo"
                    } ] ]
            });

            //监听工具条
            table.on('tool(test)', function(obj) {

                var data = obj.data;
                if (obj.event === 'detail') {
                    layer.msg('ID：' + data.id + ' 的查看操作');
                } else if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function(index) {
                        //删除数据在这里可以使用Ajax异步  就和平常使用一样简单
                        $.post("../ModuleController/delete.action", {
                            modId : data.modId
                        }, function(ret) {

                            if (ret.state == 1) {
                                layer.msg(ret.msg, {
                                    icon : 1,
                                    time : 1500
                                }, function() {
                                    table2.reload();
                                    //obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                });
                            } else {
                                layer.msg(ret.msg, {
                                    icon : 2,
                                    time : 1500
                                });
                            }
                        }, "json");
                    });
                } else if (obj.event === 'edit') {
                    layer.open({
                        type : 2,
                        title : '模块编辑',
                        shadeClose : true,
                        shade : 0.8,
                        area : [ '700px', '90%' ],
                        content : 'module.jsp?id=' + data.modId, //iframe的url
                        end : function() {
                            table2.reload();
                        }
                    });
                }
            });

            $("#close").click(function() {
                $("#divImg").hide(2000);
            });

            //头工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'deleteAllBut':
                        layer.confirm('您真的要删除吗', function(index) {
                            var data = checkStatus.data;
                            var ids = "";
                            $.each(data, function(index, item) {
                                ids += item.modId + ",";
                            });

                            var url = "../ModuleController/deleteAll.action";
                            var datas = {
                                ids : ids
                            };
                            $.post(url, datas, function(obj) {
                                layer.msg(obj.msg);
                                table2.reload();//刷新表格
                            }, "json");
                        });
                        break;
                    case 'addBut':
                        layer.open({
                            type : 2,
                            title : '模块编辑',
                            shadeClose : true,
                            shade : 0.8,
                            area : [ '580px', '90%' ],
                            content : 'module.jsp', //iframe的url
                            end : function() {
                                table2.reload();
                            }
                        });
                        break;
                }
            });
        });

        $("#seachTable").on("click",function(){
            //执行重载
            //带条件查询
            table2.reload({
                url: '../ModuleController/findAll.action',
                where: {
                    modName: $("#modName").val()
                },
                page: { curr: 1 }
            });
        })
    </script>

    <script type="text/html" id="checkboxTpl">
        <!-- 这里的 checked 的状态只是演示 -->
        <input type="checkbox" value="{{d.modState}}"   name="open" id="checked" disabled lay-skin="switch" lay-filter="switchTest" lay-text="是|否" {{d.modState=="on"?"checked":""}}>
    </script>

    <script type="text/html" id="barDemo">
        {{# if(d.modSystem=="on") { }}
        <a class="layui-btn layui-btn-xs layui-btn-disabled" lay-event="">编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-disabled" lay-event="">删除</a>
        {{# } else{}}
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
        {{# } }}
    </script>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="deleteAllBut">删除选中数据</button>
            <button class="layui-btn layui-btn-sm"  lay-event="addBut">增加数据</button>
        </div>
    </script>
</body>
</html>
